<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop">
          <div style="width:100%">
              <table class="table1style" style="font-size:12px;white-space: nowrap;">
                  <tr>
                      <td align="center">发布时间</td>
                      <td>
                          <table style="border-spacing: 0px;width:100%;">
                              <tr>
                                  <td style="padding:0px">
                                      <el-date-picker v-model="searchObj.MsgTimeStart" :clearable="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:150px;">
                                      </el-date-picker>
                                  </td>
                                  <td>至</td>
                                  <td style="padding:0px">
                                      <el-date-picker v-model="searchObj.MsgTimeEnd" type="date" :clearable="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:150px;"> </el-date-picker>
                                  </td>
                              </tr>
                          </table>
                      </td>
                      <td align="center">发布者</td>
                      <td>
                          <rm-ddl-common datatype="userinfo" dataname="用户" v-model="searchObj.senduser" width="150px"></rm-ddl-common>
                      </td>
                      <td align="center">接收者</td>
                      <td>
                          <rm-ddl-common datatype="userinfo" dataname="用户" v-model="searchObj.reciever" width="150px"></rm-ddl-common>
                      </td>
                      <td align="center">消息类型</td>
                      <td>
                          <rm-ddl-common datatype="seccode" kindno="MsgType" dataname="消息类型" v-model="searchObj.msgtype" width="100%"></rm-ddl-common>
                      </td>
                  </tr>
                  <tr>
                      <td align="center">查看标志</td>
                      <td>
                          <el-radio-group v-model="searchObj.seeflag">
                              <el-radio :label="0">未查看</el-radio>
                              <el-radio :label="1">已查看</el-radio>
                              <el-radio :label="2">全部</el-radio>
                          </el-radio-group>
                      </td>
                      <td align="center">确认标志</td>
                      <td colspan="3">
                          <el-radio-group v-model="searchObj.confirmflag">
                              <el-radio :label="0">未确认</el-radio>
                              <el-radio :label="1">已确认</el-radio>
                              <el-radio :label="2">全部</el-radio>
                          </el-radio-group>
                      </td>
                      <td align="center">删除标志</td>
                      <td>
                          <el-radio-group v-model="searchObj.delflag">
                              <el-radio :label="0">未删除</el-radio>
                              <el-radio :label="1">已删除</el-radio>
                              <el-radio :label="2">全部</el-radio>
                          </el-radio-group>
                      </td>
                  </tr>
              </table>
              <div class="operation-list">
                  <el-button @click="btnQuery" icon="el-icon-search" type="primary" v-has="'PINQUERY'">查询</el-button>
                  <el-button @click="btnDelete" icon="el-icon-delete" v-has="'PDELETE'">删除</el-button>
                  <el-button @click="btnClear" icon="el-icon-circle-close">清除</el-button>
                  <el-button @click="dialogExport=true" icon="el-icon-download" v-has="'PEXPORT'">导出</el-button>
              </div>
          </div>
      </div>
      <div class="pagecenter">
          <rm-layout-right splitcolor="white" movingcolor="#00ffff" :splitwidth=5 :fixsize=700>
              <template v-slot:fix>
                  <div style="height:100%">
                      <rm-layout-top splitcolor="white" :splitwidth=5 :fixsize=433>
                          <template v-slot:fix>
                              <div style="height:433px;">
                                  <quill-editor ref="myTextEditor" v-model="selrow.msgcontent" :options="editorOption"></quill-editor>
                              </div>
                          </template>
                          <vxe-table :data.sync="rightData" :select-config="selectConfig" height="auto" highlight-current-row :loading="Lloading" highlight-hover-row highlight-hover-column resizable show-header-overflow="tooltip" border fit show-overflow="tooltip" header-align="center" size="mini" stripe ref="rxTable" :sort-config="{trigger: 'cell'}">
                              <vxe-table-column :field="items.field" :key="items.field" :title="items.title" :width="items.width" sortable v-for="items in rtableColumn" :align="items.align" header-align="center"></vxe-table-column>
                          </vxe-table>
                      </rm-layout-top>
                  </div>
              </template>
              <div style="height:100%;width:100%;background-color:#ddccbb;">
                  <vxe-table :data.sync="leftData" :select-config="selectConfig" height="auto" highlight-current-row :loading="Rloading" highlight-hover-row highlight-hover-column resizable show-header-overflow="tooltip" border fit show-overflow="tooltip" header-align="center" size="mini" stripe ref="lxTable" :sort-config="{trigger: 'cell'}" @current-change="currentChangeEvent" :cell-class-name="cellClass" class="mytable-style">
                      <vxe-table-column :field="items.field" :key="items.field" :title="items.title" :width="items.width" sortable v-for="items in ltableColumn" :align="items.align"></vxe-table-column>
                  </vxe-table>
              </div>
          </rm-layout-right>
      </div>
      <!--导出-->
      <el-dialog title="提示" :visible.sync="dialogExport" width="580px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false">
          <div style="height:25px；font-size:18px;pdding:10px;z-indent:2em">
              选择结果则导出左边表格消息信息，选择明细则导出右下表格接收明细信息，选择取消则取消本次导出！
          </div>
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="exportOperate(1)" style="width:39px">结果</el-button>
              <el-button type="primary" @click="exportOperate(2)" style="width:39px">明细</el-button>
              <el-button @click="dialogExport = false">取 消</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
  name: "MNG199",
  components: {
      quillEditor,
  },
  data() {
      return {
          selectConfig: { tigger: "row" },
          ltableColumn: [
              { field: "sendername", title: "发布者", width: 60, align: "center" },
              { field: "recievername", title: "接收者", width: 100, align: "" },
              { field: "msgtime", title: "消息发布时间", width: 120 },
              { field: "msgtypename", title: "消息类型", width: 70, align: "center" },
              { field: "msgtitle", title: "消息标题", width: 150 },
              { field: "msgcontent", title: "消息内容", width: 500 },
              { field: "msgstatusname", title: "消息状态", width: 100, align: "center" },
              { field: "mustconfirm", title: "须确认标志", width: 80, align: "center" },
              { field: "senderdelete", title: "删除标志", width: 60, align: "center" },
          ],
          rtableColumn: [
              { field: "rectime", title: "接收时间", width: 130 },
              { field: "recrolename", title: "接收角色", width: 90, align: "center" },
              { field: "recievername", title: "接收者", width: 80, align: "center" },
              { field: "confirmflag", title: "确认标志", width: 70, align: "center" },
              { field: "confirmusername", title: "确认人", width: 90, align: "center" },
              { field: "confirmtime", title: "确认时间", width: 120 },
              { field: "delflag", title: "删除标志", width: 60, align: "center" },
          ],
          leftData: [],
          rightData: [],
          Lloading: false,
          Rloading: false,
          searchObj: {
              MsgTimeStart: this.$pub.InitDate(),
              MsgTimeEnd: this.$pub.InitDate(),
              senduser: "",
              msgtype: "",
              reciever: "",
              delflag: 2,
              seeflag: 2,
              confirmflag: 2,
          },
          editorOption: {
              placeholder: "请输入文本",
              modules: {
                  toolbar: {
                      container: [],
                  },
              },
          },
          selrow: { msgid: "" },
          dialogExport: false,
      };
  },
  created() {},
  mounted() {},
  updated() {},
  methods: {
      async InitPage() {
          try {
              this.Lloading = true;
              const res = await this.$tool.request({
                  url: "MNG/MNG1/MNG199",
                  method: "post",
                  data: {
                      action: "InitPage",
                      ...this.searchObj,
                  },
              });
              this.leftData = res.data;
              if (res.data.length > 0) {
                  this.$refs.lxTable.setCurrentRow(res.data[0]);
                  this.selrow = res.data[0];
                  this.queryRight();
              } else {
                  this.rightData = [];
                  this.selrow = { msgid: "" };
              }
              this.Lloading = false;
          } catch (err) {
              this.Lloading = false;
              this.$alert(err, "提示");
          }
      },
      currentChangeEvent({ row, column }) {
          this.selrow = row;
          this.queryRight();
      },
      queryRight() {
          this.Rloading = true;
          this.$tool
              .request({
                  url: "MNG/MNG1/MNG199",
                  method: "post",
                  data: {
                      action: "queryRight",
                      msgid: this.selrow.msgid,
                  },
              })
              .then((res) => {
                  this.rightData = res.data;
                  this.Rloading = false;
              })
              .catch((e) => {
                  this.$alert(e, "提示");
                  this.Rloading = false;
              });
      },
      btnQuery() {
          this.InitPage();
      },
      btnClear() {
          this.leftData = [];
          this.rightData = [];
          this.searchObj = {
              MsgTimeStart: this.$pub.InitDate(),
              MsgTimeEnd: this.$pub.InitDate(),
              senduser: "",
              msgtype: "",
              reciever: "",
              delflag: 2,
              seeflag: 2,
              confirmflag: 2,
          };
      },
      btnDelete() {
          this.$confirm("确定删除当前消息？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              focusCancelButton: false,
              type: "warning",
          })
              .then(() => {
                  this.DeleteMsg();
              })
              .catch(() => {});
      },
      DeleteMsg() {
          this.$tool
              .request({
                  url: "MNG/MNG1/MNG199",
                  method: "post",
                  data: {
                      action: "DeleteMsg",
                      msgid: this.selrow.msgid,
                  },
              })
              .then((res) => {
                  if (res.errmsg == "") {
                      this.$pub.message(this, "删除消息成功！", "success", 3000);
                      this.InitPage();
                  } else {
                      this.$alert(res.errmsg, "提示");
                  }
              })
              .catch((e) => {
                  this.$alert(e, "提示");
              });
      },
      //导出选择
      exportOperate(index) {
          let tableColumn = [];
          let extableColumn = [];
          if (index == "1") {
              //导出结果
              tableColumn = this.$refs.lxTable.getColumns();
              tableColumn.forEach((item) => {
                  extableColumn.push({ title: item.title, field: item.property });
              });
              this.$pub.exportTableExcel(this.leftData, extableColumn, "MNG199 发送消息查询结果.xlsx");
          } else {
              //导出明细
              tableColumn = this.$refs.rxTable.getColumns();
              tableColumn.forEach((item) => {
                  extableColumn.push({ title: item.title, field: item.property });
              });
              this.$pub.exportTableExcel(this.rightData, extableColumn, "MNG199 发送消息查询明细.xlsx");
          }
          this.dialogExport = false;
      },
      cellClass({ row, column }) {
          if (column.property == "msgtitle") {
              if (row.mustconfirm == "1") {
                  return "col-red";
              } else {
                  return "col-blue";
              }
          }
      },
  },
};
</Script>

<style scoped>
.pagetop {
  width: 100%;
  height: 100px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
  overflow-x: auto;
  overflow-x: overlay;
}

.pagecenter {
  position: absolute;
  top: 105px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}
table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}
.table1style {
  padding: 0px 5px 0px 5px;
  font-size: 12px;
}
.operation-list {
  float: right;
  margin-right: 5px;
  margin-bottom: 5px;
}
::-webkit-scrollbar {
  width: 0px;
  height: 5px;
  border: 4px solid white;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
::v-deep .mytable-style .vxe-body--column.col-red {
  background: #f3437d;
  color: whitesmoke;
}
::v-deep .mytable-style .vxe-body--column.col-blue {
  background: #0099ff;
  color: white;
}
</style>
